<template>
  <view class="empty" :style="{ padding: padding }">
    <view class="img" v-if="$slots.img">
      <slot name="img"></slot>
    </view>
    <view class="img" v-else>
      <image src="/static/empty-img/empty.png" mode="aspectFit" />
    </view>
    <view v-if="$slots.text" class="text">
      <slot name="text"></slot>
    </view>
    <view v-if="$slots.button" class="button">
      <slot name="button"></slot>
    </view>
  </view>
</template>

<script setup>
defineProps({
  padding: {
    type: String,
    default: '100rpx 0'
  }
})
</script>

<style>
/* 空 */
.empty {
  text-align: cneter;
}

.empty .img {
  display: block;
  width: 420rpx;
  height: 520rpx;
  margin: 0 auto;
}

.empty .text {
  text-align: center;
  color: #999;
  line-height: 40rpx;
  margin-top: 10rpx;
}

.empty .button {
  margin: 50rpx auto;
  background-color: #FDE9CE;
  width: 200rpx;
  font-size: 30rpx;
  height: 50rpx;
  color: #5b4523;
  border-radius: 50rpx;
  line-height: 50rpx;
  text-align: center;
}
</style>
